<html>

<head>
    <title>子系统基础信息表列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css" />
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="app"> </div>
    <script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const { Row, Col, Form, Input, Button, Table, Modal, message } = antd
    // 业务组件 
    class App extends React.Component {
        constructor(props){
            super(props)
            // 在构造器中获取引用实例
            this.formRef = React.createRef()
            this.modelFormRef = React.createRef()
            // 将组件内函数绑定 this 上下文
            this.query = this.query.bind(this)
            this.reset = this.reset.bind(this)
            this.doAdd = this.doAdd.bind(this)
            this.doUpdate = this.doUpdate.bind(this)
            this.doDelete = this.doDelete.bind(this)
            this.doView = this.doView.bind(this)
            this.createRootNode = this.createRootNode.bind(this)
            this.createBatchConf = this.createBatchConf.bind(this)
            this.handleModelClose = this.handleModelClose.bind(this)
            this.handleModlelOk = this.handleModlelOk.bind(this)
            this.tableSelect = this.tableSelect.bind(this)
            this.getRoleNumber = this.getRoleNumber.bind(this)
            // 初始组件数据
            this.state = {
                list: [],
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                },
                modelTitle: "",
                show: "",
                loading: false,
                opType: "", // 操作类型
                rowSelection: null,
                selectedRowKeys: []
            }
        }
        reset() {
            this.formRef.current.setFieldsValue({
                subsCode: ""
            })
            // or this.formRef.current.resetFields()
        }
        // 查询列表
        query(page){
            const self = this
            const pageInfo = this.state.pageInfo
            if (!page || typeof page != (typeof 1)) {
                pageInfo.page = 1;
            } else {
                pageInfo.page = page;
            }
            self.setState({pageInfo: pageInfo})
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "form",
                url: "api/s/subs/infos",
                data: Qs.stringify({
                    // 查询条件值通过 Form 获取
                    ...this.formRef.current.getFieldsValue(),
                    // 分页信息
                    ...this.state.pageInfo
                })
            }).then(function(data){
                const pageInfo = self.state.pageInfo 
                pageInfo.total = data.total 
                // 回写 state 中的值后  通过 setState 通知 react 更新 DOM
                self.setState({
                    list: data.rows.map(function(item, index){ return {...item, key: index}}),
                    pageInfo: pageInfo,
                })
            })

        }
        tableSelect(selectedRowKeys, selectedRows) {
            if (selectedRows && selectedRows.length > 0) {
                this.setState({
                    selectedRowKeys,
                    rowSelection: selectedRows[0]
                })
            }
        }
        doAdd() {
            this.setState({ show: true, modelTitle: "分类基础信息表新增", opType: "add"});
            setTimeout(()=>this.modelFormRef.current.resetFields(), 50)
        }
        doUpdate() {
            this.setState({ show: true, modelTitle: "分类基础信息表修改", opType: "update"});
            setTimeout(()=>{
                this.modelFormRef.current.setFieldsValue(this.state.rowSelection)
            }, 50)
        }
        doDelete() {
            const self = this
            if (self.state.rowSelection) {
                Modal.confirm({
                    title: '删除提示',
                    content: '你确定要删除这条记录？',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            API.request({
                                baseURL: baseURL,
                                method: "delete",
                                url: "api/s/subs/info",
                                data: self.state.rowSelection,
                            }).then(function(data){
                                message.success("记录删除成功!")
                                resolve()
                                self.query(self.state.pageInfo.page)
                                self.setState({
                                    selectedRowKeys: []
                                })
                            })
                        });
                    },
                });
            }
        }
        doView() {
            this.setState({ show: true, modelTitle: "分类基础信息表详情", opType: "view"});
            setTimeout(()=>{
                this.modelFormRef.current.setFieldsValue(this.state.rowSelection)
            }, 50)
        }
        getRoleNumber(){
            const self = this
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/s/roles"
            }).then(function(data){
                self.setState({
                    roleno : data.rows[0].roleno
                })
            })
        }
        createRootNode() {
            const self = this
            API.request({
                baseURL: baseURL,
                method: "get",
                url: "api/s/resource/" + this.state.rowSelection.subsCode
            }).then(function(data){
                message.info("业务系统已是根节点，请勿重复创建")
            }).catch(function(error){
                const row = self.state.rowSelection
                var jsonData={
                    resourceid:row.subsCode,
                    cnname:row.subsName,
                    systempk:row.subsCode,
                    parentid:'root',

                };
                API.request({
                    baseURL: baseURL,
                    method: "post",
                    url: "api/s/resource",
                    data: jsonData
                }).then(function(data){
                    //资源定义
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/resource",
                        data: {
                            "descr": "菜单访问",
                            "resourceid": data.resourceid,
                            "actid": "visit",
                        }
                    })
                    //资源操作
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/role/right/save",
                        data: {
                            "roleno": self.state.roleno,
                            "resourceid": data.resourceid,
                            "actIdStr": "visit",
                        }
                    })
                })
            })
        }
        createBatchConf() {
            const self = this
            const row = this.state.rowSelection
            API.request({
                baseURL: baseURL,
                method: "get",
                url: 'api/s/resource/' + row.subsCode,
            }).then(function(data){
                var jsonData={
                    resourceid:row.subsCode+"-batchConf",
                    cnname:row.subsName,
                    url:'bsp-console/SmcenterIndex.html?subsCode='+row.subsCode,
                    orderid:row.orderId,
                    systempk:'admin',
                    parentid:'PCPZGL',
                };
                //判断业务系统是否存在批次配置菜单
                API.request({
                    baseURL: baseURL,
                    method: 'get',
                    url: 'api/s/resource/' + jsonData.resourceid
                }).then(function(data){
                    //已存在则提示请勿重复创建
                    message.info("业务系统批次配置菜单已创建，请勿重复创建！")
                }).catch(function(error){
                    //查询不存在则创建
                    //资源定义
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/resource",
                        data: {
                            "descr": "菜单访问",
                            "resourceid": jsonData.resourceid,
                            "actid": "visit",
                        }
                    })
                    //资源操作
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/role/right/save",
                        data: {
                            "roleno": self.state.roleno,
                            "resourceid": jsonData.resourceid,
                            "actIdStr": "visit",
                        }
                    })
                    message.success('批次配置菜单创建成功！')
                })
            })
        }
        handleModelClose() {
            this.setState({
                show: false
            })
            this.modelFormRef.current.setFieldsValue({})
        }
        handleModlelOk() {
            const self = this
            const { opType } = self.state
            self.setState({
                loading: true
            })
            if (opType == "add") {
                self.modelFormRef.current.validateFields().then(function(values){
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/subs/info",
                        data: values
                    }).then(function(data){
                        message.success("操作成功");
                        self.setState({loading: false, show: false});
                        self.query(self.state.pageInfo.page);
                    }).catch(function(error){
                        message.warning("操作失败");
                        self.setState({loading: false});
                    })
                }).catch(function(errorInfo){
                    self.setState({loading: false})
                })
            } else if (opType == "update") {
                self.modelFormRef.current.validateFields().then(function(values){
                    API.request({
                        baseURL: baseURL,
                        method: "put",
                        url: "api/s/subs/info",
                        data: values
                    }).then(function(data){
                        message.success("操作成功");
                        self.setState({loading: false, show: false});
                        self.query(self.state.pageInfo.page);
                    }).catch(function(error){
                        message.warning("操作失败");
                        self.setState({loading: false});
                    })
                }).catch(function(errorInfo){
                    self.setState({loading: false});
                })
            } else {
                self.setState({loading: false, show: false})
            }
        }
        componentDidMount() {
            this.query()
            this.getRoleNumber()
        }
        render() {
            return (
                <div style={{padding: "15px"}}>
                    {/* ref 创建 Form 实例的引用 */}
                    <Form ref={this.formRef}>
                        <Row>
                            <Col span="8">
                                <Form.Item label="业务系统代码" name="subsCode" >
                                    <Input />
                                </Form.Item>
                            </Col>
                            <Col className="btn-opt" style={{padding: "0 15px"}}>
                                <Button type="primary" onClick={this.query}>查询</Button>
                                <Button onClick={this.reset}>清空</Button>
                            </Col>
                        </Row>
                    </Form>
                    <div className="text-left btn-opt">
                        <Button type="primary" onClick={this.doAdd} >新增</Button>
                        <Button type="primary" onClick={this.doUpdate} >修改</Button>
                        <Button type="primary" onClick={this.doDelete} >删除</Button>
                        <Button type="primary" onClick={this.doView} >查看</Button>
                        <Button type="primary" onClick={this.createRootNode} >创建业务系统批次配置菜单</Button>
                        <Button type="primary" onClick={this.createBatchConf} >创建业务系统批次配置菜单</Button>
                    </div>
                    { /* 
                        dataSource 为列表数组
                        onChange Table 内嵌分页 页码切换回调函数 
                        pagination Table 内嵌分页 配置 同 Pagination 组件API
                    */ }
                    <Table dataSource={this.state.list} bordered 
                        onChange={(pagination)=>this.query(pagination.current)}
                        pagination={{ position: ["bottomLeft"], 
                            current: this.state.pageInfo.page, 
                            pageSize: this.state.pageInfo.size, 
                            total: this.state.pageInfo.total }}
                        rowSelection={{
                            type: "radio",
                            selectedRowKeys: this.state.selectedRowKeys,
                            onChange: this.tableSelect
                        }}>
                        { /* Table columns 的语法糖 最终还是给 Table 传递 columns 参数 dataIndex 便是对象属性  */ }
                        <Table.Column title="业务系统代码" dataIndex="subsCode"></Table.Column>
                        <Table.Column title="业务系统名称" dataIndex="subsName"></Table.Column>
                        <Table.Column title="业务系统数据日期" dataIndex="subsDataDate"></Table.Column>    
                        <Table.Column title="业务系统上一数据日期" dataIndex="subsLastDataDate"></Table.Column>    
                        <Table.Column title="业务系统装数完成日期" dataIndex="subsLoadDate"></Table.Column>    
                        <Table.Column title="业务系统批次完成日期" dataIndex="subsBatDate"></Table.Column>    
                        <Table.Column title="批次编号前缀" dataIndex="batchIdPrefix"></Table.Column>    
                        <Table.Column title="备用日期" dataIndex="rsvDate"></Table.Column>    
                        <Table.Column title="备用状态" dataIndex="rsvState"></Table.Column>    
                        <Table.Column title="排序字段" dataIndex="orderId"></Table.Column>    
                    </Table>

                    <Modal
                        title={this.state.modelTitle}
                        visible={this.state.show}
                        onCancel={this.handleModelClose}
                        onOk={this.handleModlelOk}
                        confirmLoading={this.state.loading}
                        destroyOnClose={false}
                        keyboard={false}
                        style={{ top: 20 }}
                        okText="确定"
                        cancelText="取消"
                        width={'100%'} >
                        <Form ref={this.modelFormRef} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="业务系统代码" name="subsCode" rules={[{ required: true, message: "请输入业务系统代码" }]}>
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                                <Col span="12">
                                    <Form.Item label="业务系统名称" name="subsName">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="业务系统数据日期" name="subsDataDate">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                                <Col span="12">
                                    <Form.Item label="业务系统上一数据日期" name="subsLastDataDate">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="业务系统装数完成日期" name="subsLoadDate">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                                <Col span="12">
                                    <Form.Item label="业务系统批次完成日期" name="subsBatDate">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="批次编号前缀" name="batchIdPrefix">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                                <Col span="12">
                                    <Form.Item label="备用日期" name="rsvDate">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="备用状态" name="rsvState">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                                <Col span="12">
                                    <Form.Item label="排序字段" name="orderId">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Form>
                    </Modal>
                </div>
            )
        }
    }
    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <App />
        </antd.ConfigProvider>,
        document.getElementById('app')
    );
    </script>
</body>
</html>